<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
    body {
        width: 960px;
        margin: 0 auto;
        font-family: 微软雅黑;
        font-size: 18px;
        line-height: 1.8em;
    }

    div {
        width: 300px;
        float: left;
    }

    .relative {
        position: relative;
        top: 150px;
    }

    .absolute {
        position: absolute;
        top: 150px;
    }

    .bg {
        background-color: #fcc;
    }
    </style>
</head>

<body>
    <div>
        <h2>江城子·乙卯正月二十日夜记梦</h2>
        <p>十年生死两茫茫，不思量，自难忘。</p>
        <p>千里孤坟，无处话凄凉。</p>
        <p class="bg">纵使相逢应不识，尘满面，鬓如霜。</p>
        <p>夜来幽梦忽还乡，小轩窗，正梳妆。</p>
        <p>相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈</p>
    </div>
    <div>
        <h2>声声慢</h2>
        <p>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。

乍暖还寒时候，最难将息。

三杯两盏淡酒，怎敌他、晚来风急？</p>
        <p class="bg relative">雁过也，正伤心，却是旧时相识。满地黄花堆积。憔悴损，如今有谁堪摘？</p>
        <p>守着窗儿，独自怎生得黑？

梧桐更兼细雨，到黄昏、点点滴滴。

这次第，怎一个愁字了得！</p>
        <code>.relative { position: relative; top:150px;}</code>
    </div>
    <div>
        <h2>卜算子·咏梅</h2>
        <p>驿外断桥边，寂寞开无主。。</p>
        <p>已是黄昏独自愁，更著风和雨。</p>
        <p class="bg absolute">无意苦争春，一任群芳妒。</p>
        <p>无意苦争春，一任群芳妒。</p>
        <code>.absolute {
        position: absolute;
        top:150px;}
      </code>
    </div>
</body>

</html>